import React, { useState, useEffect } from 'react'
import { Carousel, Card } from 'antd'

const NotificationCarousel = ({ notifications }) => {
  const [currentIndex, setCurrentIndex] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % notifications.length)
    }, 3000)
    return () => clearInterval(timer)
  }, [notifications.length])

  return (
    <Carousel
      autoplay
      dots={false}
      autoplaySpeed={1000}
      afterChange={setCurrentIndex}
      effect="fade">
      {notifications.map((item, index) => (
        <div key={index}>
          {/* <Card title={item.title} bordered={false} style={{ width: '100%' }}> */}
          <div
            style={{
              backgroundColor: '#000000',
              color: '#01c2ff',

              marginLeft: '30px',
              borderRadius: '10px',
            }}>
            <p style={{ color: '#01c2ff' }}>{item.content}</p>
            <p style={{ textAlign: 'center', color: '#01c2ff' }}>
              <span>{item.title}</span>
              <span style={{ float: 'right' }}>
                {index + 1}/{notifications.length}
              </span>
            </p>
          </div>

          {/* </Card> */}
        </div>
      ))}
    </Carousel>
  )
}

export default NotificationCarousel
